<template>
	<div class="Pchangemima">
		<Pheader class="tou" msg="修改密码"></Pheader>
		<div class="changeCon">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item prop="tel">
					<el-input type="tel" placeholder="15670957013" v-model="ruleForm.tel" maxlength="11" show-word-limit></el-input>
				</el-form-item>
				<el-form-item prop="pass">
					<el-input type="password" placeholder="请输入密码(6-20位号码字符)" v-model="ruleForm.pass"></el-input>
				</el-form-item>
				<el-form-item prop="checkPass">
					<el-input type="password" placeholder="请再次输入密码确认" v-model="ruleForm.checkPass"></el-input>
				</el-form-item>
				<el-form-item prop="validate" class="clear">
					<el-input class="aric-yanzheng yanzheng" placeholder="验证码" type="text" v-model="ruleForm.validate"></el-input>
					<div class="login-code" @click="refreshCode">
						<Identify :identifyCode="identifyCode"></Identify>
					</div>
					<el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button>
				</el-form-item>
				<!-- <el-button type="primary" :disabled="disabled" @click="sendcode">
					{{btntxt}}
				</el-button> -->
				<el-form-item>
					<el-input type="text" placeholder="手机验证码"></el-input>
					<el-button :disabled="disabled" class="">
						{{btntxt}}
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="submitForm('ruleForm')" class="changeSub">提交修改</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="changeSureSubmit" v-if="show">
			<p>
				<span class="el-icon-success"></span>
				<span>恭喜您修改成功</span>
			</p>
		</div>
	</div>
</template>

<script>
	//头部小组件
	import Pheader from "@/components/P_header.vue";
	// 验证码组件
	import Identify from '../components/sidentity.vue';
    import Qs from "qs";
	export default {
		components: {
			Pheader,
			Identify
		},
		data() {
			
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			const validateVerifycode = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请输入验证码'));
				} else if (value != this.identifyCode) {
					// console.log('validateVerifycode:', value);
					this.ruleForm.validate = ''
					this.refreshCode()
					callback(new Error('验证码不正确!'));
				} else {
					callback();
				}
			};
			return {
				btntxt: "获取验证码",
				disabled: false,
				time: 0,
				identifyCodes: '123456789',
				identifyCode: '',
				show:false,
				ruleForm: {
					pass: '',
					checkPass: '',
					tel: '',
					validate: ''
				},
				rules: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					validate: [{
						validator: validateVerifycode,
						required: true,
						trigger: 'blur'
					}]
				}
			};
		},
		mounted() {
			// 初始化验证码
			this.identifyCode = ''
			this.makeCode(this.identifyCodes, 4)
		},
		methods: {
			//图片验证
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min)
			},
			refreshCode() {
				this.identifyCode = ''
				this.makeCode(this.identifyCodes, 4)
			},
			makeCode(o, l) {
				for (let i = 0; i < l; i++) {
					this.identifyCode += this.identifyCodes[
						this.randomNum(0, this.identifyCodes.length)
					]
				}
			},
			//验证手机号码部分
			// sendcode: function() {
			// 	var url = "/nptOfficialWebsite/apply/sendSms?mobile=" + this.ruleForm.phone;
			// 	if (this.ruleForm.phone == '') {
			// 		alert("请输入手机号码");
			// 		return;
			// 	}
			// 	this.time = 35;
			// 	this.disabled = true;
			// 	this.timer();
			// 	axios.post(url).then(
			// 		res => {
			// 			this.phonedata = res.data;
			// 		}
			// 	)
			// },
			// timer: function() {
			// 	if (this.time > 0) {
			// 		this.time--;
			// 		//                 console.log(this.time);
			// 		this.btntxt = this.time + "s,后重新获取验证码";
			// 		setTimeout(this.timer, 1000);
			// 	} else {
			// 		this.time = 0;
			// 		this.btntxt = "获取验证码";
			// 		this.disabled = false;
			// 	}
			// },
			//注册
			submitForm(formName) {
      var _this = this;
      var changpassword1 = document.getElementById("changpassword").value;
      window.console.log(changpassword1);
      this.$refs[formName].validate(valid => {
        if (valid) {
        //   var userphone=localStorage.getItem("userphone")
          let data = Qs.stringify({ newpassword: changpassword1,userphone: 13203853392 });
          this.$axios({
            method: "post",
            url: "http://localhost:3000/recentlook/changepassword",
            data: data,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
            .then(response => {
              _this.list = response.data.result;
              _this.code = response.data.code;
              if (_this.code == 200) {
                _this.show = true;
              }
            })
            .catch(function(error) {
              _this.data = error;
              alert("error submit!!");
            });
        } else {
          alert("error submit!!");
          return false;
        }
      });
    }
		}
	}
</script>

<style>
.Pchangemima{
  width: 100%;
  /* height: 488px; */
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  /* position: absolute;
  top: 0px;
  left: 0px; */
  background: #fff;
}
  .tou{
  padding: 12px 13px;
  border-bottom: 1px solid #e7e7e7;
}
	.changeCon {
		margin-top: 40px;
		overflow: hidden;
	}

	.changeCon .el-input input {
		width: 30%;
		height:44px;
		background:#f9f9f9;
	}
	.changeCon .el-input__inner{
		border-radius: 0;
	}
	.changeCon .el-form-item__content {
		margin-left: 35px !important;
	}

	.changeCon .aric-yanzheng {
		display: inline-block;
		width: 10% !important;
		float: left;
	}

	.changeCon .aric-yanzheng input {
		width: 100%;
	}

	.changeCon .login-code {
		float: left;
	}

	.changeCon .el-button--text {
		color: #4b943d !important;
	}
	.changeCon .el-button--default{
		background-color:#498e3d;
		font-size: 12px;
		position: absolute;
		top:6px;
		left:19%;
		border-radius: 0;
		height:32px;
		padding: 8px 13px;
		color:#fff;
	}
	.changeSureSubmit{
		width:41.82%;
		height:185px;
		background:#d9d9d9;
		position: relative;
		top:-600px;
		left: 35%;
		border-radius: 15px;
		color:#f08200;
		font-size: 23px;
		text-align: center;
		line-height: 185px;
	}
	.changeSureSubmit p>span:nth-child(1){
		font-size: 40px;
		margin-right: 15px;
		display: inline-block;
		vertical-align: middle;
	}
</style>
